<?php $this->view->partial('common/chat') ?>
<div class="profile-dn row">
	<div class="profile-wall large-10 large-centered column">
		<div class="profile-left-wall large-7 columns">
			  	<?php $this->view->partial('common/feeds'); ?>

		</div>
<!--Right div-->		
		<div class="profile-right-wall large-5 columns">

			<div class="right-bx-contain large-12 column">
				<div class="right-head large-12 column">
					<p>Job Feeds</p>
				</div>
					<div class="right-content large-12 column">
						<div class="user-dp large 2 column" style="background:url(img/user_dp/acer.jpg);background-size:cover;">
						</div>
						<div class="userinfo large-10 column">
							<a href="">Acer Philippines</a>
							<p><small>Convert design to website</small></p>
							<div class="user-info-more large-12 column" style="padding:0;margin-top:-1.3rem;">
								<span class="radius label">Php</span>
								<span class="radius label">HTML</span>
							</div>
							<div class="large-12 column" style="padding:0;">
								<small>Posted by <a href="">Jomar Bernado</a> </small>
								<small class="right">3 minutes ago</small>
							</div>
						</div>
					</div>
					<div class="right-content large-12 column">
						<div class="user-dp large 2 column" style="background:url(img/user_dp/freelancer.jpg);background-size:cover;">
						</div>
						<div class="userinfo large-10 column">
							<a href="">Tsui Lee via <small>Freelancer.com</small></a>
							<p><small>Convert design to website</small></p>
							<div class="user-info-more large-12 column" style="padding:0;margin-top:-1.3rem;">
								<span class="radius label">CSS</span>
								<span class="radius label">Phalcon</span>
							</div>
							<div class="large-12 column" style="padding:0;">
								<small>Posted by <a href="">Jomar Bernado</a> </small>
								<small class="right">3 minutes ago</small>
							</div>
						</div>
					</div>
				<div class="see-more text-right large-12 column">
					<a href="">See more feeds</a>
				</div>
			</div>
			<div class="right-bx-contain large-12 column">
				<div class="right-head large-12 column">
					<p>People to Connect</p>
				</div>
				<?php foreach ($possible_connections as $value) { ?>
					<div id="possible_<?=$value->id?>"class="right-content large-12 column">
						<div class="user-dp large 2 column" style="background:url('<?= IMAGE_URL_SMALL.$value->profile_pic ?>');background-size:cover;">
						</div>
						<div class="userinfo large-7 column">
							<a target ="_blank" href="<?=BASE_URI.'profile?bhd='.$value->id?>"><?= $value->fname.' '.$value->lname?></a>
							<p><small>Freelance Web Programmer</small></p>
						</div>
						<div class="text-right btn-lst large-3 columns">
							<a friend-id="<?= $value->id ?>" class="tiny radius button btnConnect">Connect</a>
						</div>
					</div>
				<?php } ?>
				<div class="see-more text-right large-12 column">
					<a href="">See more people</a>
				</div>
			</div>

			<div class="large-12 columns" style="padding:0;">
				<?php $this->view->partial('common/footer'); ?>
			</div>
<!--End Right div-->
	</div>
</div>
</div>
<script type="text/javascript">
	var pusher = new Pusher('2e92c25412a18c2f7f97');
	var channel = pusher.subscribe('my-channel');
	
	channel.bind('request-sent', function(data) {
		if(data.sender_id == SS_USER_ID)
		{
			$('#possible_' + data.receiver_id).remove();
		}
	});


	function insertRequest(friend_id)
	{
		var params = {};
		params.receiver_id = friend_id;
		return $.ajax({
			url: URL + 'connections/requestConnection',
			type: 'post',
			data: params,
			dataType: 'json'
		});
	}

	var $connect = $('.btnConnect');
	
	$connect.one('click',function(){
		var me = $(this);
		var friend_id = $(this).attr('friend-id');
		$(this).text('Sending . . .');
		if(friend_id){
			insertRequest(friend_id).done(function(result){
				if(result.status == true)
				{

					me.text('Request Sent');
				}
				else
				{
					me.text(result.messages);
				}
			});
		}
	});

</script>

<style type="text/css">

body{
	background: skyblue;
}
</style>
